import React, { useState } from "react";
import { Table, Button, Modal, Input, Form } from "antd";
import { useLocation } from "react-router-dom"; // 地址栏传参

// 预定义的数据数组
const initialData = [
  {
    key: 1,
    name: "OA用户管理1",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
  },
  {
    key: 2,
    name: "OA用户管理2",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
  },
  {
    key: 3,
    name: "OA用户管理3",
    age: 29,
    address: "Jiangsu No. 1 Lake Park",
    description: "This not expandable",
  },
  {
    key: 4,
    name: "OA用户管理4",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.",
  },
];

const OaUser = () => {
  const location = useLocation();
  const role = location.state?.role || "logger";
  const [data, setData] = useState(initialData);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();

  const handleAdd = () => {
    form.validateFields().then((values) => {
      const newData = {
        key: data.length + 1,
        ...values,
        description: "New User",
      };
      setData([...data, newData]);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  const handleDelete = (key) => {
    const newData = data.filter((item) => item.key !== key);
    setData(newData);
  };

  const columns = [
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "权限",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "角色",
      dataIndex: "address",
      key: "address",
    },
  ];

  // 如果是 admin 角色，添加操作列
  if (role === "admin") {
    columns.push({
      title: "操作",
      dataIndex: "",
      key: "x",
      render: (_, record) => (
        <Button type="link" onClick={() => handleDelete(record.key)}>
          删除
        </Button>
      ),
    });
  }

  return (
    <>
      {role === "admin" && (
        <>
          <Button
            type="primary"
            size="small"
            style={{ marginBottom: "21px" }}
            onClick={() => setIsModalVisible(true)}
          >
            添加用户
          </Button>
          <Modal
            title="添加用户"
            open={isModalVisible}
            onOk={handleAdd}
            onCancel={() => setIsModalVisible(false)}
          >
            <Form form={form} layout="vertical">
              <Form.Item
                name="name"
                label="用户名"
                rules={[{ required: true, message: "请输入用户名" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="age"
                label="权限"
                rules={[{ required: true, message: "请输入权限" }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="address"
                label="角色"
                rules={[{ required: true, message: "请输入角色" }]}
              >
                <Input />
              </Form.Item>
            </Form>
          </Modal>
        </>
      )}
      <Table
        columns={columns}
        expandable={{
          expandedRowRender: (record) => (
            <p
              style={{
                margin: 0,
              }}
            >
              {record.description}
            </p>
          ),
          rowExpandable: (record) => record.name !== "Not Expandable",
        }}
        dataSource={data}
      />
    </>
  );
};

export default OaUser;
